<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="Graph"> <Graph></Graph> </a-tab-pane>
    <a-tab-pane key="4" tab="Performance Domain">

      <PerformanceDomain></PerformanceDomain>
      
    </a-tab-pane>
    <a-tab-pane key="2" tab="Search">
      <div style="display: flex; margin-bottom: 8px">
        <div style="flex: 0 0 0px"></div>
        <div style="flex: 1 1 auto">
          <PmpItemSearch @selected="showDictinfo"></PmpItemSearch>

          <!-- [[[{{pmpHooks.pmpDict}}]]] -->
        </div>
      </div>
      <BasicInfo :data="data" v-if="data.id"></BasicInfo>
    </a-tab-pane>

    <a-tab-pane key="3" tab="Assistant">
      <Assistant></Assistant>
    </a-tab-pane>

    

    <a-tab-pane key="5" tab="debug">
      <!-- <span
        v-for="item in Object.values(pmpHooks.pmpDict.value)"
        :key="item.id"
      >
        "{{ item.id }}",
      </span> -->
      <!-- {{  pmpHooks.pmpDict }} -->
      <ImportantView></ImportantView>
    </a-tab-pane>

    <a-tab-pane key="6" tab="Cut Out">
      <CutOutSummary></CutOutSummary>
    </a-tab-pane>

    <a-tab-pane key="7" tab="Recite">
      <Recite></Recite>
    </a-tab-pane>

    <a-tab-pane key="8" tab="Topic">
      <TopicPage></TopicPage>
    </a-tab-pane>
  </a-tabs>
</template>
<script setup>
import PmpItemSearch from '@/components/PmpItemSearch.vue'
import pmpHooks from '@/hooks/PmpHooks.js'
import { ref, onMounted,onBeforeMount } from 'vue'
import BasicInfo from '@/components/BasicInfo.vue'
import Assistant from '@/components/Assistant.vue'
import Graph from '@/components/Graph.vue'
import ImportantView from '@/components/ImportantView.vue'

import CutOutSummary from '@/components/CutOutSummary.vue'
import PerformanceDomain from '@/components/PerformanceDomain.vue'
import Recite from '@/components/Recite.vue'
import TopicPage from '@/components/TopicPage.vue'
const data = ref({})
const activeKey = ref('1')
function showDictinfo(d) {
  data.value = d
}
onMounted(async () => {
  await pmpHooks.initPmpDict()
})


</script>
<style scoped></style>
